<template>
	<view>
		<library-item :item="dataForm" :optVisible="false"></library-item>
		<view class="opt_relative"></view>
		<view class="opt_btn">
			<view class="btn_item" @click="collectChange">
				<view :class="['iconfont',dataForm.isFavorite == 1?'act iconfont-e732':'iconfont-e733']"></view>
				<view class="tip_box">
					<!-- <view class="num">6</view> -->
					<view class="tip">收藏</view>
				</view>
			</view>
			<view class="btn_item" @click="toDown">
				<view class="iconfont iconfont-e635"></view>
				<view class="tip_box">
					<!-- <view class="num">135</view> -->
					<view class="tip">下载图文</view>
				</view>
			</view>
			<button class="btn_item u-reset-button" open-type="share">
				<view class="wx iconfont iconfont-e606"></view>
				<view class="tip_box">
					<!-- <view class="num">119</view> -->
					<view class="tip">分享</view>
				</view>
			</button>
		</view>
		<sww-login></sww-login>
		<down-finish v-model="visible"></down-finish>
	</view>
</template>

<script>
	import library from '@/pagecomponents/articleLibrary/index.vue'
	import downFinish from '@/pagecomponents/articleLibrary/components/downFinish.vue'
	import {
		uniCopy
	} from '@/utils/uniPromise.js'
	export default {
		data() {
			return {
				dataForm: {},
				visible: false
			}
		},
		components: {
			'library-item': library,
			'down-finish': downFinish
		},
		onLoad(options) {
			if (options && options.id) {
				this.initPage(Number(options.id))
			}
		},
		methods: {
			initPage(id) {
				this.$loading()
				// this.$resPost('GetInfotainmentList', {
				// 	pk_id: id || this.dataForm.pk_id,
				// 	type: 3
				// })
				this.$resPost('GetInfotainmentInfo', {
						pk_id: id || this.dataForm.pk_id
					})
					.then((res) => {
						this.dataForm = {
							...res.data
						}
						this.$hide()
					})
			},
			//收藏切换
			collectChange() {
				this.$u.debounce(
					() => {
						let state = this.dataForm.isFavorite == 1
						this.$login('initPage').then(() => {
							let apiName = state ? 'DeleteUsersFavourite' : 'AddUsersFavourite';
							this.$loading();
							this.$resPost(apiName, {
									type: 5,
									product_id: this.dataForm.pk_id
								})
								.then(() => {
									this.$hide();
									this.$toast(state ? '已取消收藏' : '收藏成功');
									this.dataForm.isFavorite = state ? '0' : '1';
								})
								.catch(() => {
									this.$hide();
								});
						});
					},
					500,
					true
				);
			},
			toDown() {
				console.log('this.dataForm.img', this.dataForm.img)
				if (this.dataForm.img) {
					console.log(1)
					this.dowImg(this.dataForm.img.split(','), 0)
				} else {
					this.dowText()
				}
			},
			dowImg(list, index) {
				if (index < list.length) {
					console.log('下载去')
					uni.showLoading({
						title: `下载第${index+1}张图片`
					})
					uni.downloadFile({
						url: list[index].replace('http:', 'https:'),
						success: (res) => {
							// 获取到图片本地地址后再保存图片到相册（因为此方法不支持远程地址）
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: () => {
									console.log('下载成功2')
									this.dowImg(list, index + 1)
								},
								fail: () => {
									this.dowText()
								},
							});
						},
						fail: () => {
							this.dowText()
						}
					});
				} else {
					this.dowText()
				}
			},
			dowText() {
				uniCopy(this.dataForm.name)
				this.visible = true
			},
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	.opt_relative {
		height: 90rpx;
		box-sizing: content-box;
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.opt_btn {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		height: 90rpx;
		bottom: 0;
		width: 100%;
		padding: 0 60rpx;
		border-top: 2rpx solid #e5e5e5;
		position: fixed;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.btn_item {
			display: flex;
			align-items: center;

			.iconfont {
				color: #292929;
				font-size: 46rpx;
				margin-right: 12rpx;
				&.act{
					color: #FE9E43;
				}
				&.wx {
					color: #3AAA22;
				}
			}

			.tip_box {
				color: #888;
				font-size: 22rpx;

				// .tip {
				// 	margin-top: 4rpx;
				// }
			}
		}
	}
</style>
